/**
 * Created by wuli等等 on 2017/3/2.
 */
import React, { Component } from 'react';
import {
    View,
    Image,
    StyleSheet,
    TouchableHighlight,
    Modal,
    Text,
    TouchableOpacity
} from 'react-native';

import Header from '../component/Header';

export default class PublishChoose extends Component {
    constructor(props) {
        super(props);
        this.state = {modalVisible: false};
    }

    setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }

    render() {

        return (
            <View style={styles.container}>
                <Header text="订单类型选择"/>
                <View style={styles.container2}>
                    <View style={styles.zero}>
                        <Image source={{uri: 'http://placehold.it/350x150/0767c8/ffffff/&text=零担'}} style={styles.img}/>
                    </View>

                    <View style={styles.full}>
                        <TouchableOpacity  onPress={()=>{ this.setModalVisible(!this.state.modalVisible)}}>
                        <Image source={{uri: 'http://placehold.it/350x150/EE7600/ffffff/&text=整单'}} style={styles.img}/>
                        </TouchableOpacity >
                    </View>

                </View>
                <Modal
                    animationType={"slide"}
                    transparent={false}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {alert("Modal has been closed.")}}
                >
                    <View>
                        <View>
                           <Header text="零担发布"/>

                            <TouchableHighlight onPress={() => {
                                this.setModalVisible(!this.state.modalVisible)
                            }}>
                                <Text>Hide Modal</Text>
                            </TouchableHighlight>

                        </View>
                    </View>
                </Modal>
            </View>

        );
    }
}
let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#ffffff'
    },
    container2:{
        height:300,
        justifyContent: 'center',
        flexDirection:'row',
        alignItems: 'center',

    },
    zero:{
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    full:{
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    img:{
        width:100,
        height:100,
        borderRadius:100
    }
});
